<!DOCTYPE html>
<html>
<head>
  <title>Animation demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="../helper.js"></script>

  <style type="text/css" media="screen">
    #container {
      position: relative;
      height: 300px;
      width: 300px;
      margin: 50px 100px;
      border: 1px dashed blue;
    }

    #parent {
      width: 300px;
      height: 300px;
      background-color: #844BCA;
      opacity: 0.5;
    }

    #parent > div {
      position: absolute;
      top: 40px;
      left: 40px;
      width: 200px;
      height: 200px;
      font-family: monospace;
      font-size: 12pt;
    }

    #parent > :first-child {
      background-color: #49DC93;
    }

    #parent > :last-child {
      background-color: #FF6;
    }


    body {
      margin: 20px;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="parent">
      <div>transform: translateZ(-100px) rotateY(45deg);</div>
      <div>transform: translateZ(50px) rotateX(20deg);</div>
    </div>
  </div>
  <h1>Transform Style</h1>
  <p>
    This is a copy of the original 
    <a href="http://www.webkit.org/blog-files/3d-transforms/transform-style.html" target="_blank">webkit demo</a>,
    using the qooxdoo API and with that, works cross browser if the CSS features are supported.<br>
    It shows the effect of the <code>transform style</code> property. The default setting is <code>preserve-3d</code> while on hover, the 
    style will be changed to <code>flat</code>.
  </p>
</body>
</html>